<template>
    <div info-container>
        <!-- 筛选日志 -->
        <div class="select-container">
            <el-form>
                <el-form-item label="创建时间" :model="selectForm" :inline="true">
                    <el-col :span="5">
                        <el-date-picker 
                            type="date" placeholder="开始日期" 
                            v-model="selectForm.startTime" style="width: 100%;"
                            value-format="yyyy-MM-dd"
                            >
                        </el-date-picker>
                    </el-col>
                    <el-col :span="1"><div>至</div></el-col>
                    <el-col :span="5">
                        <el-date-picker 
                            type="date" placeholder="结束日期" 
                            v-model="selectForm.endTime" style="width: 100%;" 
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="2"><el-button type="primary" @click="search()">查询</el-button></el-col> 
                </el-form-item>
                
            </el-form>
        </div>
        <el-divider></el-divider>
        <!-- 收藏列表 -->
        <div class="table-container">
            <el-table :data="acdata.aclist" stripe style="width: 100%" border
            :header-cell-style="{background:'rgb(178, 147, 147)',color:'rgb(57, 50, 50)'}">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="academyName" label="收藏书院"></el-table-column>
                <el-table-column prop="academyId" label="书院ID"></el-table-column>
                <el-table-column prop="createTime" label="收藏时间"></el-table-column>
                <el-table-column label="操作" width="250px">
                <template slot-scope="scope">
                    <!-- 取消收藏按钮 -->
                    <el-button type="danger" size="mini" @click="judgeDelete(scope.row.academyId)">取消收藏</el-button>
                    <el-button @click="jumpTo(scope.row.academyId)" size="mini">查看书院</el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
        <!-- 分页 -->
       <el-pagination
        layout="total, prev, pager, next"
        :total="this.acdata.total"
        @current-change="handleCurrentChange" 
        :current-page="currentPage"
        :page-size="pagesize"
      >
      </el-pagination> 
    </div>
</template>

<script>
    import requests from '@/api/ajax'
    export default{
        data() {
            return {
                selectForm: {
                    startTime: '',
                    endTime: '',
                },
                acdata: {
                    aclist:[],
                    total: 0
                },
                currentPage: 1, //当前页 刷新后默认显示第一页
                pagesize: 8,
            }
        },
        created() {
            this.search()
        },
        methods: {
            search(){ // 获取书院收藏列表
                // console.log(this.selectForm)
                if(this.selectForm.endTime == null) {
                    this.selectForm.endTime = ''
                }
                if(this.selectForm.startTime == null) {
                    this.selectForm.startTime = ''
                }
                requests.get('/collects/academy/list',
                {
                    params: {
                        page: 1,
                        pageSize: 8,
                        startTime: this.selectForm.startTime,
                        endTime: this.selectForm.endTime
                    }
                }
                ).then(
                    (res) => {
                        // console.log(res)
                        this.acdata.aclist = res.data.records
                        this.acdata.total = res.data.total
                    }
                )
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage
                // console.log(this.currentPage)
                requests.get('/collects/academy/list',
                {
                    params: {
                        page: this.currentPage,
                        pageSize: 8,
                        startTime: this.selectForm.startTime,
                        endTime: this.selectForm.endTime
                    }
                }
                ).then(
                    (res) => {
                        // console.log(res)
                        this.acdata.aclist = res.data.records
                        this.acdata.total = res.data.total
                    }
                )
            },
            judgeDelete(id) { // 取消收藏
                this.$messagebox.confirm('此操作将取消该书院的收藏且无法撤回, 是否继续?', '提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(
                    () => {
                        requests.delete('/collects/academy/cancel/' + id).then(
                            (res) => {
                                // console.log(res);
                                this.$message.success('取消收藏成功!')
                                this.$router.go(0)
                            }
                        )
                    }
                ).catch(
                    () => {
                        this.$message.info('已撤回取消收藏')
                    }
                )
            },
            jumpTo(id){
                console.log(id)
                this.$router.push('/profile/editProfile/?id=' + id)
            }
        },
        
    }
</script>

<style lang="less" scoped>
.info_container{
      height: 600px;
      width: 100%;
      margin-left: 150px;
      margin-top: 50px;
      font-size: larger;
}
.select-container{
    width: 1225px;
    background-color: rgb(255, 255, 255);
    padding-left: 30px;
    padding-top: 30px;
    padding-bottom: 20px;
}
</style>